<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_CSS常用值</title>
    <style>
        h1 {
            color: red;


            color: rgb(255,0,0);
            color: rgb(0,255,255);
            color: rgb(0,255,0);
            color: rgb(255,0,255);
            color: rgb(0,0,255);
            color: rgb(255,255,0);
            color: rgb(255,255,255);
            color: rgb(128,128,128);
            color: rgb(0,0,0);

            /* 十六进制表示法 #RRGGBB */
            color: #FF0000;
            color: #00FFFF;
            color: #00FF00;
            color: #FF00ff;
            color: #0000FF;
            color: #FFFF00;
            color: #FFFFFF;
            color: #000000;

            /*  */

            div {
                width: 100px;
                height: 100px;
                border: 5px solid #000;
            }
            .d1 {
                background-color: rgba(255,0,0,1);
            }
            .d2 {
                background-color: rgba(255,0,0,0.7);
            }
            /* 可以将0.5之前的0.5的0省略掉写成.5 */
            .d3 {
                background-color: rgba(255,0,0,.5);
            }
            .d4 {
                background-color: rgba(255,0,0,.3);
            }
            .d5 {
                background-color: rgba(255,0,0,0);
            }
        }
        .bgi {
            width: 500px;
            height: 300px;
            background-image: linear-gradient(130deg,red,#000,#fff);
        }
        .viewport {
            width: 100vw;
            height: 100vh;
            background-image: linear-gradient(130deg,rgba(255,255,0,0.7),#fff,green);
        }
    </style>
</head>
<body>

<div class="viewport"></div>
<h1>测试色值</h1>
<!--.d*5 Tab补齐-->
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<div class="bgi"></div>


</body>
</html>